<meta name="csrf-token" content="{{ csrf_token() }}">
<script src='js/jquery.js'></script>
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css">
<script src='js/jquery.datetimepicker.full.js'></script>
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css"/>
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<link rel='stylesheet' type="text/css" href='css/rhui.css' />
<script src='lang/zh-cn.js'></script>
<link href='css/rhui.css' rel='stylesheet' type="text/css" />
<script src='js/rhui-all.js'></script>
<style type="text/css">
	#mycalendar{
		display: block;
		position: relative;
		width: 900px;
		margin: 15px auto;
		padding: 0;
	}
	
	.fc button{
		height: 27px;
	}
	
	.fc-center>h2{
		font-size: 20px;
		line-height: 27px;
	}
	
	.fc-unthemed .fc-divider, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead{
		border-color: #bed5f3;
	}
	
	.fc-unthemed .fc-divider, .fc-unthemed .fc-popover .fc-header,.fc-widget-header,.fc-axis{
		background-color: #e5effe;
	}
	
	.fc th, .fc td{
		font-size: 14px;
		line-height: 25px;
	}
	
	.rhui-field{
		width: 250px;
		margin-bottom: 10px;
	}
	
	.field-label{
		width: 70px;
		line-height: 23px;
		vertical-align: top;
	}
</style>
<script type="text/javascript">
$(function(){
	//初始化FullCalendar
	$('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		
		//设置日历头部的日期格式
		titleFormat: {
		    month: 'YYYY年MM月',
			week: 'YYYY年MM月DD日',
		    day: 'YYYY年MM月DD日 dddd'
		},
		
		//日历高度
		height: $(window).height() - 40,
		
		//显示周末，设为false则不显示周六和周日。
		weekends: true,
		handleWindowResize:true,
		
		/*
			在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。
			fixed：固定显示6周高，日历高度保持不变
			liquid：不固定周数，高度随周数变化
			variable：不固定周数，但高度固定
		*/
		weekMode: 'liquid',
		
		//日历上显示全天的文本
		allDayText: '全天',
		
		//允许用户通过单击或拖动选择日历中的对象，包括天和时间。
		selectable: true,
		
		//当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。
		selectHelper: true,
		
		//当点击页面日历以外的位置时，自动取消当前的选中状态。
		unselectAuto: true,
		
		events: 'admin/schedule_get',
		
		/*
			添加日程事件
			start: 被选中区域的开始时间
			end: 被选中区域的结束时间
			jsEvent: jascript对象
			view: 当前视图对象
		*/
		select: function(start, end, jsEvent, view){
			//添加日程事件
			var $win = $('#addCalendarWin');
			$win.find('input[name="start"]').val(start.format('YYYY-MM-DD HH:mm'));
			$win.find('input[name="end"]').val(end.format('YYYY-MM-DD HH:mm'));
			$win.rhui('window').show();
		},
		
		/*
			修改日程事件
			当点击日历中的某一日程时，触发此事件
			data: 日程信息
			jsEvent: jascript对象
			view: 当前视图对象
		*/
		eventClick: function(data, jsEvent, view){
			//修改日程事件
			var $win = $('#editCalendarWin');
			$win.find('input[name="id"]').val(data.id);
			$win.find('#schedule_content').val(data.title);
			$win.find('input[name="start"]').val(data.start.format('YYYY-MM-DD HH:mm'));
			$win.find('input[name="end"]').val(data.end.format('YYYY-MM-DD HH:mm'));
			$win.rhui('window').show();
		}
	});
	
	//初始化新建日程窗口
	(function(){
		var $win = $('#addCalendarWin');
		
		//初始化日期控件
		$win.find('#start').datetimepicker({format: 'Y-m-d H:i'});
		$win.find('#end').datetimepicker({format: 'Y-m-d H:i'});
		
		$win.rhui('window', {
			title: '新建日程',
			width: 400,
			height: 265,
			buttons: [{
				text: '确定',
				cls: 'rhui-btn-primary',
				click: function(toolbar, win){
					$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
					$.ajax({
			            url: "admin/schedule_add_handle", 
			            data: {
							event:$('#schedule_content').val(),
							startdate:$('#start').val(),
							enddate:$('#end').val()
			            },
			            async: true,   //是否为异步请求
			            cache: false,  //是否缓存结果
			            type: "POST", //请求方式为POST
			            success: function(result){  //这个方法会在服务器执行成功是被调用 ，参数result就是服务器返回的值(现在是json类型) 
			                if(result){
			                    //alert("true");
			                    win.hide();
			                    parent.location.reload();
								//$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
			                }else{
			                    alert("添加失败，请重新添加！");
			                }
			            }
          			});
				}
			},{
				text: '取消',
				click: function(toolbar, win){
					win.hide();
				}
			}]
		}).hide();				
	})();
	
	//初始化修改日程窗口
	(function(){
		var $win = $('#editCalendarWin');
		
		//初始化日期控件
		$win.find('#start').datetimepicker({format: 'Y-m-d H:i'});
		$win.find('#end').datetimepicker({format: 'Y-m-d H:i'});
		
		$win.rhui('window', {
			title: '修改日程',
			width: 400,
			height: 260,
			buttons: [{
				text: '删除',
				cls: 'rhui-btn-danger',
				click: function(toolbar, win){
					//alert('日程已删除');
					if(confirm("您确定要删除吗？")){
						var eventid = $("#eventid").val();
						$.get("admin/schedule_delete_handle/"+eventid,function(result){
							if(result){//删除成功
								win.hide();
			                    location.reload(); //重新获取所有事件数据
							}else{
								alert(result);	
							}
						});
					}
				}
			},{
				text: '取消',
				click: function(toolbar, win){
					win.hide();
				}
			}]
		}).hide();
	})();
});
// $(function() {
// 	$('#calendar').fullCalendar({
// 		header: {
// 			left: 'prev,next today',
// 			center: 'title',
// 			right: 'month,agendaWeek,agendaDay'
// 		},
// 		events: 'admin/schedule_get',
// 		dayClick: function(date, allDay, jsEvent, view) {
// 			var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');
// 			//var selDate = $.moment(date).format("yyyy-MM-dd")
// 			$.fancybox({
// 				'type':'ajax',
// 				'href':'/admin/schedule_add_form/'+selDate
// 				// 'href':'event.php?action=add&date='+selDate
// 			});
//     	}
// 	});
	
// });
</script>
<div class="box box-default">
    <div class="box-header with-border">
        <h3 class="box-title">我的日程</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
        </div>
    </div>

    <!-- /.box-header -->
    <div class="box-body">
        <div id='calendar'></div>
    <!-- 新建日程窗口 -->
	<div class="rhui-window" id="addCalendarWin" style="display:none;">
		<div class="rhui-panel-body">
			<form id="addCalendarForm" action="admin/schedule_add_handle" method="post">
				<table style="margin-left:25px;">
					<!-- <tr>
						<td class="field-label">日程标题：</td>
						<td><input class="rhui-field" name="title" type="text" id="title" /></td>
					</tr> -->
					<tr>
						<td class="field-label">日程内容：</td>
						<td><textarea class="rhui-field" name="schedule_content" id="schedule_content" style="height:72px;"></textarea></td>
					</tr>
					<tr>
						<td class="field-label">开始时间：</td>
						<td><input class="rhui-field" name="start" type="text" id="start" readonly="true" /></td>
					</tr>
					<tr>
						<td class="field-label">结束时间：</td>
						<td><input class="rhui-field" name="end" type="text" id="end" readonly="true"/></td>
					</tr>
				</table>
				<input type="hidden" value="{{csrf_token()}}">
			</form>
		</div>
	</div>
	<!-- end 新建日程窗口 -->
	
	<!-- 修改日程窗口 -->
	<div class="rhui-window" id="editCalendarWin" style="display:none;">
		<div class="rhui-panel-body">
			<!-- 日程id -->
			<input type="hidden" name="id" id="eventid" />
			<table style="margin-left:25px;">
				<!-- <tr>
					<td class="field-label">日程标题：</td>
					<td><input class="rhui-field" name="title" type="text" /></td>
				</tr> -->
				<tr>
					<td class="field-label">日程内容：</td>
					<td><textarea class="rhui-field" name="schedule_content" style="height:72px;" id="schedule_content"></textarea></td>
				</tr>
				<tr>
					<td class="field-label">开始时间：</td>
					<td><input class="rhui-field" name="start" type="text" id="start" readonly="true"/></td>
				</tr>
				<tr>
					<td class="field-label">结束时间：</td>
					<td><input class="rhui-field" name="end" type="text" id="end" readonly="true"/></td>
				</tr>
			</table>
		</div>
	</div>
	<!-- end 修改日程窗口 -->	
    </div>
</div>
